<template>
    <div class="page-login">
        <!-- 使用form表单组件 -->
        <!-- 
            inline    是否行内
            :label-width="80" 
            :model="formValue"    model 是表单数据
            :rules="rules"      rules 校验规则
         -->
        <n-form ref="formRef" :label-width="80" :model="model" :rules="rules" inline>
            <n-form-item label="姓名" path="user.name">
                <n-input v-model:value="model.user.name" placeholder="输入姓名" />
            </n-form-item>
            <n-form-item label="年龄" path="user.age">
                <n-input v-model:value="model.user.age" placeholder="输入年龄" />
            </n-form-item>

            <n-form-item label="电话号码" path="phone">
                <n-input v-model:value="model.phone" placeholder="电话号码" />
            </n-form-item>

            <n-form-item label="邮箱" path="email">
                <n-input v-model:value="model.email"  placeholder="邮箱" />

            </n-form-item>

            <n-form-item>
                <n-button attr-type="button" @click="handleValidateClick">
                    验证
                </n-button>
            </n-form-item>
        </n-form>

    </div>
</template>

<script >
export default {
    /*  name选项 的作用
    *   1. 在vue-tools里面更好的显示
    *   2. keep-alive组件设置include 或 exclude 时，需要用到这个name
    *   3. 当前组件内部需要调用自己时（递归）
    */
    name: 'login',
    data() {
        return {
            // 表单数据
            model: {
                user: {
                    name: '',
                    age: ''
                },
                phone: '',
                email:''
            },

            // 表单的校验规则
            rules: {
                user: {
                    name: {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur',
                    },
                    age: {
                        required: true,
                        message: '请输入年龄',
                        trigger: ['input', 'blur'],  // 这两种情况都会触发校验
                    },
                },
                // phone: {
                //     required: true,   // 必填，表单对应的元素会显示* 号
                //     message: '请输入 phone number!', // 表单未填时显示的文字
                //     trigger: 'blur',   // 触发校验的方式
                // },

                phone:[
                    { required: true, message:'请输入号码！',trigger:'blur'},
                    // 自定义校验
                    { validator: (rule,value )=>{
                        console.log('value:',value);
                        // 返回true，校验通过； false 不通过
                        if(value.length >11){
                            return false;
                        }
                        return true;
                        },
                        message:'最大仅支持11位数字',
                        trigger:'blur'
                    },
                    {
                        validator:(rule,value)=>{
                            if(/^1\d{10}$/.test(value)){
                                return true
                            }else{
                                return false;
                            }
                        },
                        message:'请输入正确的手机号！',
                        trigger:'blur'
                    }
                ],

                email:[
                    {
                        // 如果不使用 邮箱格式，也可以自定义校验规则
                        type:'email',  // 需要使用邮箱格式
                        message:'请输入正确的邮箱',
                        trigger:'blur'
                    }
                ]

            }
        }
    },
    methods: {
        handleValidateClick() {
            console.log('提交');
        }
    },
}

</script>
<style scoped>
.page-login {
    width: 100%;
    height: 100%;
    /* background-color: skyblue; */
}
</style>